Kurs HTML 4.01, XHTML 1.0 i CSS 2 z przyk│adami autor: Dariusz Majgier • ostatnia aktualizacja kursu: 2003.06.01

[Start] • [Elementy HTML] • [Atrybuty HTML] • [Style CSS] • [Porady online]
[A] [B] [C] [D] [E] [F] [H] [I] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [Z]
[kolory] • [tekst] • [czcionki] • [rozmiary] • [pozycje] • [tabele] • [listy] • [formularze]
[struktura] • [linki] • [multimedia] • [bloki] • [obramowania] • [t│a] • [synteza] • [druk]

Odbiorcami naszych stron WWW s▒ w wiΩkszo╢ci osoby ciesz▒ce siΩ dobrym zdrowiem, u┐ywaj▒ce popularnych przegl▒darek, nie maj▒ce k│opot≤w ze sprzΩtem komputerowym czy wy╢wietlaniem grafiki. Jednak o klasie autora stron WWW ╢wiadczy takie przygotowanie witryny, aby korzystaµ z niej mogli tak┐e pozostali u┐ytkownicy Sieci.

Na co zwr≤ciµ uwagΩ? Po prostu wczuj siΩ w rolΩ tych, kt≤rzy nie dysponuj▒ najnowsz▒ technologi▒ lub nie maj▒ mo┐liwo╢ci aby poprawnie odebraµ zawarto╢µ stron internetowych. Wbrew pozorom takich os≤b jest sporo. Czasem mog▒ to byµ osoby wa┐ne, maj▒ce wp│yw na dalsze losy Twojej strony.

Przegl▒darki

PrzeciΩtny internauta zna cztery przegl▒darki: Internet Explorer, Netscape Navigator, Mozilla i Opera. Pewnie czΩ╢µ os≤b s│ysza│a jeszcze o Lynxie - przegl▒darce pracuj▒cej w trybie tekstowym, bez grafiki. Tymczasem na ╢wiecie wykorzystywanych jest ponad 50 r≤┐nych przegl▒darek stron WWW, a tak┐e r≤wnie wiele przegl▒darek stosowanych w tzw. kioskach multimedialnych czy budkach informacyjnych, spotykanych np. na dworcach kolejowych lub targach. Wiele z tych przegl▒darek pracuje na r≤┐nych systemach operacyjnych, co powoduje kolejne ograniczenia, np. ilo╢ci stosowanych kolor≤w lub rozdzielczo╢ci ekranu.

Ka┐da z przegl▒darek jest nieco inna, zwykle nie obs│uguje najnowszych standard≤w WWW, a czΩ╢ci polece± HTML nie wykonuje wcale. Je┐eli Twoja strona a┐ roi siΩ od grafik, u┐ytkownik przegl▒darki tekstowej zobaczy pustkΩ i bΩdzie rozczarowany. Gorzej, gdy nie bΩdzie m≤g│ z niej korzystaµ - nie zobaczy przecie┐ menu i nie bΩdzie wiedzia│ co ma klikn▒µ aby przej╢µ dalej. Wymogiem jest wiΩc stosowanie atrybutu alt w grafikach istotnych dla u┐ytkownika.

Innym problemem jest rozdzielczo╢µ ekranu i ilo╢µ kolor≤w. U Ciebie ekran jest du┐y i wszystko na nim mo┐esz pomie╢ciµ, ale u┐ytkownik palmtopa czy organizera bΩdzie musia│ stronΩ przewijaµ nie tylko w pionie, ale te┐ w poziomie. Je┐eli wykorzystuje tylko 16 kolor≤w, to na niewiele zdadz▒ mu siΩ Twoje kolorowe zdjΩcia. Mo┐e te┐ byµ sytuacja odwrotna - Ty masz niewielk▒ rozdzielczo╢µ (np. 800x600), ale u┐ytkownik dysponuje du┐ym ekranem i rozdzielczo╢µ ustawi sobie na 1280x1024. Nagle strona staje siΩ dla niego ma│a, a teksty, kt≤re u Ciebie sk│ada│y siΩ z kilku wierszy zajmuj▒ tylko jeden wiersz... Ca│o╢µ mo┐e wygl▒daµ nieczytelnie lub ma│o estetycznie.

Przed opublikowaniem strony warto przetestowaµ jej wygl▒d przynajmniej w trzech najpopularniejszych przegl▒darkach. Opera pozwala wy│▒czyµ grafikΩ co dodatkowo poka┐e, czy osoba bez grafiki bΩdzie mog│a w dalszym ci▒gu korzystaµ z serwisu. Utrudnieniem jest fakt, ┐e Internet Explorer potrafi naprawiaµ drobne (ale czasem istotne) b│Ωdy w kodzie HTML, np. niezamkniΩte tabele. WiΩc strona kt≤ra wygl▒da poprawnie, wcale nie musi byµ dobrze napisana i w innych przegl▒darkach mo┐e wygl▒daµ okropnie.

Osoby niepe│nosprawne

Czemu osoby niewidome nie odwiedzaj▒ witryn wykonanych w technologii Flash? Bo nie maj▒ szans zobaczyµ grafik i tekst≤w zaszytych w kodzie animacji. Za to potrafi▒ spΩdziµ wiele godzin na prostych witrynach, gdzie nie ma wiele grafik, a ca│y tekst znajduje siΩ na jednej stronie WWW. Bardzo wiele os≤b niewidomych pozna│em dziΩki Reporterowi - publikowane tam opowiadania i artyku│y │atwo mogli odczytaµ za pomoc▒ syntezator≤w mowy. Nic im nie przeszkadza│o w skopiowaniu artyku│u i od│o┐eniu go na potem.

Rozmowa z osob▒ niewidom▒, korzystaj▒c▒ z naszych stron WWW mo┐e byµ bardzo pouczaj▒ca. To trochΩ tak, jakby╢my mieli korzystaµ z serwisu bez u┐ycia monitora. Je┐eli to mo┐liwe, nie utrudniaj korzystania osobom, kt≤re i tak maj▒ z tym k│opoty. U│atw im ┐ycie - doceni▒ to z pewno╢ci▒.

Wiele os≤b niedowidzi, a czΩ╢µ ma k│opoty z r≤zr≤┐nianiem kolor≤w. Czytanie z ekranu mΩczy wzrok i po kilku godzinach pracy przed monitorem │atwo o przeoczenie ma│ych element≤w lub pomy│kΩ w odcieniach barw poszczeg≤lnych wykres≤w. Staraj siΩ aby strony by│y maksymalnie czytelne. Dobieraj tak kolory t│a, aby nie mΩczy│y wzroku ju┐ po kilkunastu minutach czytania.

Spr≤buj pochodziµ przez chwilΩ po serwisie bez korzystania z myszy. Nie ka┐dy ma sprawn▒ rΩkΩ i mysz. CzΩ╢µ os≤b korzysta z r≤┐nych manipulator≤w - p│ytek dotykowych, ma│ych gumowych pa│eczek przypominaj▒cych d┐ojstik, kulek, rysik≤w. Sprawne rΩce to cenna rzecz, ale wyobra╝ sobie, ┐e z Twojego serwisu korzystaj▒ te┐ osoby starsze, kt≤rym rΩka dr┐y i nie mog▒ │atwo wycelowaµ myszk▒ w ma│y, graficzny odno╢nik lub link w postaci miniaturowego napisu. Dla nich korzystanie z serwisu bΩdzie trudne, wiΩc bΩd▒ sfrustrowani, ┐e nie mog▒ trafiµ w odno╢nik. BΩdzie im przykro, ┐e nikt o nich nie pomy╢la│.

Nie tylko monitor

Ekran monitora to nie jedyne urz▒dzenie do prezentowania strony WWW. Mo┐na je przecie┐ wydrukowaµ, zsyntetyzowaµ i przedstawiµ w postaci g│osu elektronicznego lektora lub przenie╢µ np. na specjalne czytniki alfabetu Braila, z kt≤rych mog▒ korzystaµ niewidomi. Wiele os≤b kopiuje stronΩ do edytor≤w tekstu lub zapisuje j▒ na dysk lokalny. Dobra strona daje siΩ przenie╢µ do ka┐dej z tych postaci. Czasem warto zadbaµ o kilka wersji swojej strony, np. wiΩksze opracowania mo┐na przygotowaµ w postaci stron HTML i dokumentu PDF.

5 maja 1999 r. organizacja W3C opublikowa│a dokument "Web Content Accessibility Guidelines 1.0", kt≤ry opisuje jak przygotowaµ strony aby by│y one dostΩpne dla r≤┐nych urz▒dze± lub os≤b niepe│nosprawnych. Warto go poznaµ, je┐eli chcesz tworzyµ serwisy uniwersalne.

Zauwa┐, ┐e ju┐ CSS2 przewiduje obs│ugΩ stron WWW na takich urz▒dzeniach, jak: aural - syntezatory mowy, braille - dotykowe czytniki Braila, embossed - drukarki Braila, handheld - czytniki w urz▒dzeniach narΩcznych (np. palmtopy), print - drukarki, projection - projektory, screen - monitory komputerowe, tty - terminale, tv - telewizory.

Inne drobiazgi

Jest jeszcze wiele istotnych udogodnie±, wa┐nych dla odbiorc≤w naszych stron. Chocia┐by umo┐liwienie kontaktu z czytelnikiem bez potrzeby korzystania z programu pocztowego. Ma│y formularz z polem na tekst umo┐liwi wys│anie listu z dowolnego miejsca, chocia┐by z kawiarni internetowej. Wa┐ne jest te┐ podanie adresu e-mail, w formie │atwej do kopiowania i przenoszenia do edytora tekstu.

Warto stosowaµ streszczenia i zapowiedzi tekst≤w. Aby oszczΩdziµ czas osoby niewidomej mo┐na w dw≤ch zdaniach napisaµ o czym jest d│ugi tekst. Podobnie w wypadku dokument≤w nietypowych warto poinformowaµ jak▒ maj▒ objΩto╢µ. Gdy kto╢ korzysta z wolnego modemu i pr≤buje otworzyµ dokument PDF maj▒cy 10 MB, a nie wie, jak d│ugi jest ten dokument, mo┐e my╢leµ, ┐e plik jest uszkodzony bo wci▒┐ nie widaµ tre╢ci. Gdyby wiedzia│, ┐e musi po╢wiΩciµ wiele czasu na otwarcie go, byµ mo┐e nie podj▒│by siΩ pobierania pliku albo zrobi│by to w pracy, gdzie ma szybsze │▒cze.

Opisane przypadki nie s▒ tylko rozwa┐aniami teoretycznymi. Wiele serwis≤w, organizacji, dziennik≤w i instytucji na ca│ym ╢wiecie stara siΩ sprostaµ opisanym przypadkom. Sam czΩsto korzystam z takich udogodnie±, pomimo tego, ┐e jestem sprawny i korzystam z nowoczesnego sprzΩtu.